<template>
  <div class="print-wrapper" >
      <div v-for="i in printList">
        <header>
          <h3 class="wrapper-head">{{i.title || '辉煌口腔上海路分院'}}</h3>
        </header>
        <div class="order-main">
          <!-- 附加信息 -->
          <div class="additional-info">
            <div class="additional-info-item">
              <span>病历号</span>
              <span>{{i.historyNum}}</span>
            </div>
            <div class="additional-info-item">
              <span>姓名</span>
              <span>{{i.customerName}}</span>
            </div>
            <div class="additional-info-item">
              <span>No</span>
              <span>{{i.orderNum}}</span>
            </div>
          </div>

          <!-- 订单信息 -->
          <div class="order-info">
            <div class="order-info-head">
              <div class="order-info-head-item">牙位</div>
              <div class="order-info-head-item">收费项目名称</div>
              <div class="order-info-head-item">原价</div>
              <!-- <div class="order-info-head-item">折扣价</div> -->
              <div class="order-info-head-item">单位</div>
              <div class="order-info-head-item">数量</div>
              <div class="order-info-head-item">金额</div>
            </div>
            <div class="order-info-content">
              <div class="info-content-item" v-for="item in i.details">
                <div style="height: 100%"><showTooth :toothData="item.toothBit"></showTooth></div>
                <div>{{item.itemName}}</div>
                <div>{{item.priceShow}}</div>
                <!-- <div>{{item.realPriceShow}}</div> -->
                <div>{{item.unit}}</div>
                <div>{{item.number}}</div>
                <div>{{item.realMoneyShow}}</div>
              
              </div>
            </div>
            <div class="order-footer">
              <div class="order-footer-item" >
                <span>余额: </span>
                <span>{{i.balanceShow || 0}}</span>
              </div>
              <div class="order-footer-item" >
                <span>馈赠金余额: </span>
                <span>{{i.giftsOfGoldShow || 0}}</span>
              </div>
              <div class="order-footer-item" >
                <span>前欠金额: </span>
                <span>{{i.beforeOweMoneyShow}}</span>
              </div>
              <div class="order-footer-item" >
                <span>总计应收: </span>
                <span>{{i.originalPriceShow}}</span>
              </div>
              <div class="order-footer-item" >
                <span>累计欠款: </span>
                <span>{{i.theCumulativeBalanceShow}}</span>
              </div>
              <div class="order-footer-item" >
                <span>实付金额: </span>
                <span>{{i.amountMoneyShow}}</span>
              </div>
            </div>
          </div>
          <!-- 尾部描述信息 -->
          <div class="footer">
            <div class="footer-item">
              <span>收款人: </span>
              <span>{{i.collectionUserName}}</span>
            </div>
            <div class="footer-item">
              <span>医生: </span>
              <span>{{i.doctorNames}}</span>
            </div>
            <div class="footer-item">
              <span>护士: </span>
              <span>{{i.nurseNames}}</span>
            </div>
            <div class="footer-item" >
              <span>支付方式: </span>
              <span>{{i.payMoneyShow}}</span>
            </div>
            <div class="footer-item" >
              <span>电话: </span>
              <span>{{i.subCompanyPhone}}</span>
            </div>
            <div class="footer-item" >
              <span>营业时间: </span>
              <span>{{i.workTimeShow}}</span>
            </div>
            <div class="footer-item" >
              <span>收款时间: </span>
              <span>{{i.collectionTimeShow}}</span>
            </div>
            <div class="footer-item" >
              <span>地址: </span>
              <span>{{i.subCompanyAddress}}</span>
            </div>
            <div class="footer-item" >
              <span>备注: </span>
              <span>{{i.remark}}</span>
            </div>
          </div>

        </div>
        <!-- 分页 -->
        <div style="page-break-after:always"></div>
      </div>
	</div>
</template>

<script lang="ts">
import { defineComponent, PropType, watch, ref } from '@vue/runtime-core';
import showTooth from '../tooch/showTooth.vue';

export default defineComponent({
  name: 'PrintHtml',
  props: {
    printList: {
      type: Array as PropType<any[]>
    }
  },
  components: {
    showTooth
  },
  setup(props) {
    let list = ref<any[]>([])
    watch(() => props.printList, (newList) => {
      list.value = newList || []
    })
    return {
      list,
    }
  }
})
</script>

<style lang="scss" scoped>
.print-wrapper {
	header > h3 {
		margin: 0;
		text-align: center;
	}
  .wrapper-head {
    font-size: 18px;
    font-weight: 500;
  }

	.order-main {
    font-size: 12px;
		.additional-info {
			display: flex;
			border-bottom: 1px solid #000;
			height: 20px;
			line-height: 20px;

			.additional-info-item {
				flex: 1;
				& > span:nth-child(1) {
					padding-right: 5px;
				}
			}

			.additional-info-item:nth-child(2) {
				text-align: center;
				& > span:nth-child(1) {
					padding-right: 8px;
				}
			}
			.additional-info-item:nth-child(3) {
				text-align: center;
			}
		}

		.order-info {
			display: flex;
			flex-direction: column;
			.order-info-head {
				display: flex;
				height: 24px;
				line-height: 24px;
				border-bottom: 1px solid #000;
        box-sizing: border-box;

				.order-info-head-item {
					flex: 1;
				}
				.order-info-head-item:nth-child(1) {
					flex: 2;
				}
				.order-info-head-item:nth-child(2) {
					flex: 2;
				}
				
			}

			.order-info-content {
				// flex: 1;
        height: 144px;
				.info-content-item {
					display: flex;
					align-items: center;
					height: 24px;
					padding-top: 2px;
          box-sizing: border-box;

					& > div {
						flex: 1;
					}

					& > div:nth-child(1) {
						flex: 2;
					}
					& > div:nth-child(2) {
						flex: 2;
					}
				}
			}

			.order-footer {
				display: flex;
				height: 24px;
				line-height: 24px;
				border-top: 1px solid;
				border-bottom: 1px solid;
				border-color: #000;
        box-sizing: border-box;

				.order-footer-item {
					flex: 1;
				}
			}
		}

		.footer {
			display: flex;
			flex-wrap: wrap;

			.footer-item {
				margin: 0px 20px 3px 0;
			}
		}
	}
}
</style>